<template>
    <tn-popup :model-value="props.showCate" open-direction="bottom" height="100vh" :overlay-closeable="false">
        <view class="main">
            <view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
                <view class="main-title dispaly-center" :style="{ height: systemInfo.sBarHeight + 'px' }">
                    <view class="title dispaly-just-between">
                        <view class="title-left" @click="closePop">
                            <tn-icon name="left" color="#000" size="40" />
                        </view>
                        <view class="title-right dispaly-center">
                            <view class="title-text">筛选</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="content " :style="{ height: newsPanelHeight + 'px' }" v-if="props.type == 2">
                <view class="dispaly-center cate">
                    <scroll-view scroll-y="true" :class="paddingBottomClass" class="scroll-Y right"
                        :style="{ height: newsPanelHeight + 'px' }">
                        <view class="hot-main">
                            <view class="title">时间</view>
                            <view class="dispaly-center hot">
                                <view class="list-data hot-box" @click="currentValue = item.id"
                                    v-for="item in props.data" :key="item.id" style="width: 45%;"
                                    :class="{ 'active-block': item.id == currentValue }">
                                    <view class="info dispaly-center">
                                        <view class="city" :class="{ active: item.id == currentValue }">{{
                                            item.name
                                        }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>

            <view class="content " :style="{ height: newsPanelHeight + 'px' }" v-if="props.type == 1">
                <view class="dispaly-center cate">
                    <scroll-view class="scroll left" :class="paddingBottomClass" scroll-y="true"
                        :style="{ height: newsPanelHeight + 'px' }">
                        <view class="cate-box dispaly-col p-30">
                            <view :class="{ active: oneCateCurrent == index }" @click="oneCateClick(item, index)"
                                class="item dispaly-center" v-for="(item, index) in props.data" :key="index">
                                <view class="line" v-if="oneCateCurrent == index"></view>
                                <view class="name">{{ item.name }}</view>
                            </view>
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y="true" :class="paddingBottomClass" class="scroll-Y right"
                        :style="{ height: newsPanelHeight + 'px' }">
                        <view class="hot-main" v-for="item in oneCateItem" :key="item.id" v-if="oneCateItem.length">
                            <view class="title">{{ item.name }}</view>
                            <view class="dispaly-center hot" v-if="item.children.length">
                                <view class="list-data hot-box" @click="currentValue = child.id"
                                    v-for="(child, index) in item.children" :key="index"
                                    :class="{ 'active-block': child.id == currentValue }">
                                    <view class="info dispaly-center">
                                        <view class="city" :class="{ active: child.id == currentValue }">{{
                                            child.name
                                        }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view v-else class="z">暂无</view>
                        </view>
                        <view v-else class="h-100 dispaly-col-center">
                            <Empty text="暂无分类" />
                        </view>
                    </scroll-view>
                </view>

            </view>
        </view>
        <view class="btn fixed">
            <view class="btn-box">
                <view class="left-btn" @click="currentValue = ''">清除</view>
                <view class="right-btn" @click="submit">确定</view>
            </view>
        </view>
    </tn-popup>
</template>

<script setup lang="ts">
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { onReady } from '@dcloudio/uni-app'
import { ref, computed } from 'vue';
import { getScreenSHeight } from '@/utils/util'
import type { CateType } from '@/types/responseData'

interface PropsType {
    showCate: boolean,
    tab: boolean,
    data?: CateType[] | any,
    type: number
}
const props = withDefaults(defineProps<PropsType>(), {
    type: 1,
})
// 点击一级分类
let oneCateCurrent = ref<number>(0)
let oneCateItem = ref<CateType[]>(props.data[0].children)
const oneCateClick = (item: CateType, index: number) => {
    oneCateCurrent.value = index
    oneCateItem.value = item.children
}


// 点击分类
let currentValue = ref<string | number>()

// 确定分类
const submit = () => {
    emit('close', false)
    emit('confirm', currentValue.value as number)
    if (props.tab) {
        uni.showTabBar()
    }
}

// 底部padding距离
const paddingBottomClass = computed(() => props.tab ? 'p120' : 'p230')
let systemInfo = uni.getStorageSync('systemInfo')
const emit = defineEmits<{
    close: [show: boolean],
    confirm: [id: number]
}>()
// 关闭弹窗
const closePop = () => {
    emit('close', false)
    if (props.tab) {
        uni.showTabBar()
    }
}

// 获取屏幕剩余高度
const newsPanelHeight = ref<number>(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(uni.getStorageSync('systemInfo').sBarHeight) as number
})
</script>
<style lang="scss" scoped>
.active-block {
    border: 1rpx solid #388095;
}

.ac-l {
    border-left: 5rpx solid #388095;
}

.main {
    .top {
        .main-title {
            .title {
                width: 55%;
            }
        }
    }
}

.cate {
    .left {
        border-right: 1rpx solid #f6f6f6;
        flex: 2;

        .cate-box {

            .item:last-child {
                padding-bottom: 0;
            }

            .item {
                padding-bottom: 30rpx;
                box-sizing: border-box;

                .name {
                    font-size: 23rpx;
                }

                .line {
                    margin-right: 10rpx;
                    width: 10rpx;
                    height: 30rpx;
                    background-color: #388095;
                }
            }
        }
    }

    .right {
        flex: 4;
    }
}

.hot-main {
    padding: 20rpx;
    margin: 0 auto;

    .title {
        padding-left: 10rpx;
        font-weight: 900;
        font-size: 25rpx;
        margin-bottom: 25rpx;
    }

    .z {
        padding-left: 10rpx;
        font-size: 23rpx;
    }

    .hot {
        flex-wrap: wrap;

        .hot-box {
            width: 42.5%;
        }
    }
}

.list-data {
    width: 218rpx;
    height: 66rpx;
    background-color: #f6f6f6;
    border-radius: 15rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 10rpx;
    text-align: center;
    margin: 10rpx 10rpx;

    .info {
        .city {
            font-size: 23rpx;
        }
    }
}

.p120 {
    padding-bottom: 120rpx;
}

.p230 {
    padding-bottom: 230rpx;
}
</style>